<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue :title="navTitle" />
		<view class="search" id="searchView">
			<view class="word-input-box">
				<image class='search-logo' src="@/static/image/course/ciku_sousuo.png"></image>
				<input @input="searchValueChange" class='word-input' placeholder="查找单词 (search)"></input>
			</view>
			<view class="screen-menuback">
				<view class="coreWord" @click="coreWordTap">{{coreWordTitle}}</view>
			</view>
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y :scroll-into-view="toView"
			:scroll-with-animation='true'>
			<z-paging :fixed="false" ref="paging" v-model="wordLibrary" @query="getQueryList"
				style="width: 100%; height: 100%;" :default-page-size="20">
				<view v-for="(word, wordIndex) in wordLibrary" :key='wordIndex'>
					<view class='zimu' @click='toWordDetail' :data-wordIndex="wordIndex">
						<image v-if="word.kernel == true" class="coreimg-class" src="/static/image/course/core_word.png"
							mode=""></image>
						<view v-else class="coreimg-class"></view>
						<view class="weizhi">
							{{word.spell}}
						</view>
					</view>
				</view>
			</z-paging>
		</scroll-view>
		<view id='cdwz'>
			<block v-for="(item, index) in letter" :key='index'>
				<view :class="item == scrollLetter ? 'caidan-activite' : 'caidan'" @click='jump' :id="index">{{item}}
				</view>
			</block>
		</view>
		<popPromptBox v-if="showPromptbox" :msg="PromptMsg" @confirm="hidePromptbox"></popPromptBox>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					terminal: 'PCZX_APP',
				},
				showPromptbox: false,
				wordModel: {},
				navTitle: '单词列表',
				word_detail: {
					id: 1133991
				},
				scrollHeight: 0,
				noSearch: false,
				words_num: 0,
				toView: '',
				letter: ['ALL', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				scrollLetter: 'ALL',
				wordLibrary: [],
				groupTop: [],
				staticWordLibrary: [],
				scroll_height: 0,
				coreWordTitle: '核心词汇'
			}
		},
		onLoad(options) {
			console.log('options', options)
			this.wordModel = JSON.parse(options.wordModel);
			this.navTitle = this.wordModel.productName ? this.wordModel.productName : this.wordModel.name;
			this.wordType = options.wordType;
		},
		onReady() {
			this.calculateScrollViewHeight();
			this.getWordData(true);
		},
		mounted() {},
		methods: {
			hidePromptbox() {
				this.showPromptbox = false;
			},
			getQueryList(pageNo, pageSize) {
				this.formData.pageNum = pageNo;
				this.formData.pageSize = pageSize;
				if (this.wordType == 'lexicon') {
					this.formData.id = this.wordModel.id;
					this.$http.spbcnInfoByIdPage(this.formData).then(res => {
						if (res.code == 200) {
							this.$refs.paging.complete(res.data.spells);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					this.formData.code = this.wordModel.flag;
					this.$http.spbcnInfoByPage(this.formData).then(res => {
						if (res.code == 200) {
							this.$refs.paging.complete(res.data.spells);
						} else {
							this.$refs.paging.complete(false);
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// 核心词汇点击事件
			coreWordTap() {
				this.coreWordTitle = this.coreWordTitle == '核心词汇' ? '查看全部' : '核心词汇';
				this.getWordData(false);
			},
			// 获取词库列表内容
			getWordData(firstType) {
				this.formData.firstType = firstType;
				this.formData.kernel = this.coreWordTitle == '查看全部' ? true : null;
				this.$refs.paging.reload();
			},
			// 首字母点击
			jump(num) {
				console.log('num', num);
				const selectNum = Number(num.target.id);
				this.formData.initial = selectNum == 0 ? '' : this.letter[num.target.id];
				this.scrollLetter = this.letter[num.target.id];
				this.getWordData(false);
			},
			// 搜索内容输入
			searchValueChange(inputData) {
				console.log('inputData', inputData)
				this.formData.spell = inputData.detail.value;
				this.getWordData(false);
			},
			toWordDetail(e) {
				var wordIndex = e.currentTarget.dataset.wordindex;
				this.getAllWordList(wordIndex)
			},
			getAllWordList(wordIndex) {
				this.formData.pageNum = 1;
				this.formData.pageSize = 200000;
				var allWordId = [];
				var wordData = this.wordLibrary[wordIndex];
				if (this.wordType == 'lexicon') {
					this.formData.id = this.wordModel.id;
					this.$http.spbcnInfoByIdPage(this.formData).then(res => {
						if (res.code == 200) {
							for (var i = 0; i < res.data.spells.length; i++) {
								allWordId.push(res.data.spells[i].id)
							}
							var wordDict = {
								wordId: wordData.id,
								type: 'normal'
							};
							uni.navigateTo({
								url: '/pages/lexicon/lexWordDetails?wordDict=' + JSON.stringify(wordDict) +
									'&wordLibrary=' +
									JSON.stringify(allWordId),
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				} else {
					this.formData.code = this.wordModel.flag;
					this.$http.spbcnInfoByPage(this.formData).then(res => {
						if (res.code == 200) {
							for (var i = 0; i < res.data.spells.length; i++) {
								allWordId.push(res.data.spells[i].id)
							}
							var wordDict = {
								wordId: wordData.id,
								type: 'normal'
							};
							uni.navigateTo({
								url: '/pages/lexicon/lexWordDetails?wordDict=' + JSON.stringify(wordDict) +
									'&wordLibrary=' +
									JSON.stringify(allWordId),
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			calculateScrollViewHeight() {
				// 获取容器的高度（这里假设你可以直接获取，或者通过其他方式计算得到）  
				const that = this
				uni.createSelectorQuery().select('#searchView').boundingClientRect(rect => {
					// rect 是一个对象，包含了节点的布局位置（相对于小程序页面，以像素为单位）、宽高信息  
					that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - 20;
				}).exec();
			}
		}
	}
</script>

<style lang="less">
	.backview {
		width: 100%;
		height: 100vh;
		background: #fff7dd;
	}

	.search {
		width: 100%;
		height: 100px;
		padding: 0px 30px;
		background: -webkit-linear-gradient(top, #000, #2a2824);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.word-input-box {
		width: 300px;
		background: #fff;
		height: 35px;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 5px 0px 0px rgba(204, 204, 204, 1);
	}

	.search-logo {
		width: 30px;
		height: 24px;
		margin: 0 10px 0 0;
	}

	.word-input {
		width: 250px;
		height: 35px;
		font-size: 14px;
	}

	.screen-menuback {
		width: 300px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.coreWord {
		width: 110px;
		margin-top: 15px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		text-align: center;
		color: black;
		border-radius: 15px;
		font-weight: 900;
		background: -webkit-linear-gradient(top, #d1a34e, #fee96f);
	}


	.words-scroll {
		width: 100%;
	}




	.group-name {
		width: 100%;
		height: 40px;
		text-align: center;
		font-size: 18px;
		line-height: 40px;
		font-weight: 900;
		color: white;
		background: -webkit-linear-gradient(top, #000, #302f2c);
	}

	/* 字母属性 */
	.zimu {
		width: 87%;
		margin: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 40px;
		border-radius: 8px;
		line-height: 40px;
		background: -webkit-linear-gradient(top, #000, #302f2c);
		box-shadow: 0px 5px 0px 0px #9b8b6f;
		font-size: 18px;
		font-family: 'hzgb';
		color: white;
	}

	.coreimg-class {
		width: 30px;
		height: 30px;
		margin-left: 15px;
	}

	.marginleft {
		margin-left: 25px;
	}

	/* 字母位置 */
	.weizhi {
		margin-left: 10px;
	}

	/* 菜单位置 */
	#cdwz {
		position: fixed;
		right: 5px;
		top: 2%;
		height: 95%;
		z-index: 101;
		width: 7.5%;
		font-family: Arial, Helvetica, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.letter_index {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}

	.index_select {
		background: #fed444;
	}

	.index_letter {
		position: absolute;
		left: 70%;
		top: 50%;
		width: 50px;
		height: 50px;
		line-height: 50px;
		color: #fff;
		background: #fed444;
		font-size: 30px;
		border-radius: 50%;
		text-align: center;

	}

	.caidan-activite {
		background-color: #fed444;
		font-size: 13px;
		margin-top: 5px;
		color: #007ADF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	/* 字母菜单样式 */
	.caidan {
		font-size: 13px;
		margin-top: 5px;
		color: #007ADF;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.words_total {
		text-align: center;
		font-size: 16px;
		color: #000;
		height: 40px;
		line-height: 40px;
	}

	.no-search {
		margin-top: 70px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
	}
</style>